<template>
  <van-search
    v-model="searchVal"
    shape="round"
    placeholder="请输入搜索关键词"
  />
  <van-cell-group v-if="!emptyFlag">
    <van-cell
      v-for="(item, index) in searchData"
      :key="index"
      :title="item.goods_name"
    />
  </van-cell-group>
  <van-empty
    v-else
    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
    image-size="80"
    description="暂无数据"
  />
</template>

<script setup>
import { getQsearch } from "@/api/api.js";
import { ref, watch } from "vue";
const searchVal = ref("");
const searchData = ref([]);
import _ from "lodash";

watch(
  searchVal,
  _.debounce((val) => {
    getQsearch(val).then((res) => {
      searchData.value = res.data.message || [];
      emptyFlag.value = !res.data.message.length;
      console.log("emptyFlag.value: ", emptyFlag.value);
      console.log("res: ", res);
    });
  }, 3000)
);
const emptyFlag = ref(true);
</script>

<style></style>
